<!DOCTYPE html>
<html>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<title>链接转二维码生成</title>
	<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
	<script src="./js/alert.js" charset="utf-8"></script>
	<script src="./js/jquery.min.js"></script>
	<style type="text/css">
		.qrcode{
			min-width: 260px;
			padding: 10px;
			background-color: #f0f0f0;
		}
	</style>
	<script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.6/clipboard.js"></script>
	</head>
	<body class="indexbody">
		<!--QQ/微信分享标题图-->
		<div><img src="./images/qr_logo.jpg" alt="QQ/微信分享标题图" style="display:none;"></div>
		<div class="container">
			<div class="panel panel-sm">
				<div class="panel-heading clearfix">
					<label><i class="fa fa-bookmark"></i>二维码生成器</label>
				</div>  
				<div class="form-group form-group-sm"> 
					<div class="col-md-10 "> 
					</div>
				</div>  
				<div class="form-group form-group-sm">
					<div class="col-md-10 "> 
					</div>
				</div> 
				<form action="" class="form-horizontal panel-body" id="form1" method="post">
					<ul class="nav nav-tabs nav-tabs-sm" role="tablist" id="mytabs">
						<li role="presentation" class="active">
							<a href="http://gz.offcn.com/" role="tab" data-toggle="tab" id="tab1" aria-controls="pane1"><strong>链接及二维码生成工具</strong></a>
						</li>
					</ul>
					<div class="tab-content" style="padding-top: 15px;">
						<div role="tabpanel" class="tab-pane fade in active" id="pane1" aria-labelledby="tab1">
							<div class="form-group form-group-sm">
								<label class="control-label col-md-2">活动链接</label>
								<div class="col-md-10 ">
									<input name="txtContent" id="txtContent" class="form-control input-normal" placeholder="请输入宣传活动链接">
								</div>
							</div> 
							<div class="form-group form-group-sm">
								<label class="control-label col-md-2">logo</label>
								<div class="col-md-10">
									<input type="file" name="Getlogo" title="上传logo" value="上传logo" id="getLogo" multiple="multiple" class="btn btn-default"
									 style="display: inline-block;" onchange="docImgUrl(event)" />
									<button name="closelogo" class="btn btn-default" type="button" onclick="closeLogo()" title="close_logo">去除logo</button>
								</div>
							</div>
							<div class="form-group form-group-sm">
								<label class="control-label col-md-2">二维码大小</label>
								<div class="col-md-10">
									<label><input name="codeSize" type="radio" checked="checked" value="260" />小(260)</label> &ensp;&ensp;
									<label><input name="codeSize" type="radio" value="350" />中(350)</label> &ensp;&ensp;
									<label><input name="codeSize" type="radio" value="500" />大(500)</label> &ensp;&ensp;
									<label><input name="codeSize" type="radio" value="800" />特大(800)</label>
								</div>
							</div>
							<div class="form-group form-group-sm">
								<label class="control-label col-md-2">二维码图像</label>
								<div class="col-md-10">
									<div id="qrcode" class="qrcode"></div>
									<!-- <div class="qrcode-box">
										<canvas id="myCanvas" width="260" height="260"></canvas>
									</div> -->
									<p class="m-top-10 text-muted">右键另存为本地~ 使用手机扫一扫检查下下</p>
								</div>
							</div>
							<div class="form-group form-group-sm">
								<div class="col-md-10 col-md-offset-2">
									<p class="form-control-static text-danger" id="tips"></p>
								</div>
							</div>
						</div>
					</div>
					<hr class="sm">
					<div class="btn-footer">
						<button name="btnCreate" class="btn btn-success" type="button" onclick="f_onCreateQrcode();" title="将根据您填写的内容生成二维码图像">开始生成</button>
						<button name="btnClear" class="btn btn-default" type="button" onclick="f_onClearQrcode();" title="清除">清除</button> 
					</div>
					<hr class="sm">
					<div class="btn-footer"> 
						<button name="btnCreate" class="btn btn-danger dropdown-toggle" type="button"  id="save" title="将根据您填写的内容生成二维码图像">下载并保存</button> 
					</div>
				</form>
			</div>
		</div>
		<script src="./js/modernizr-2.8.3.js" type="text/javascript"></script>
		<script src="./js/bootstrap.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="./js/jquery.qrcode.js"></script> 
		<script type="text/javascript">   
			 $(function(){  })		
			function convertCanvasToImage(canvas) {
				var image = new Image();
				image.src = canvas.toDataURL("image/png");
				return image;
			}
			//设置 qrcode 参数
			var makeQrcode = function(url, qrSize, ImgData, logoSize) {
				$("#qrcode").qrcode({
					render: "canvas",
					text: url,
					width: qrSize, //二维码的宽度
					height: qrSize,
					background: "#ffffff", //二维码的后景色
					foreground: "#000000", //二维码的前景色
					src: ImgData,
					imgWidth: logoSize,
					imgHeight: logoSize
				}); 
			}

			/*默认状态*/
			var nowUrl = '';
			var imgURl = "./images/qr_logo.png";
			var nowSize = 260;
			var nowSizeRulse = function() {
				if (nowSize == 260) {
					nowLogoSize = 60;
				} else if (nowSize == 350) {
					nowLogoSize = 80;
				} else if (nowSize == 500) {
					nowLogoSize = 110;
				} else if (nowSize == 800) {
					nowLogoSize = 180;
				};
			}
			nowSizeRulse();
			makeQrcode(nowUrl, nowSize, imgURl, nowLogoSize); 
			
			/*二维码大小*/
			var codeSize = document.getElementsByName("codeSize"); 
			function getQrSize() {
				for (var i = 0; i < codeSize.length; i++) { //遍历Radio 
					if (codeSize[i].checked) {
						nowSize = codeSize[i].value;
					}
				}
				nowSizeRulse();
			}
			 

			/*Logo上传*/
			function docImgUrl(e) {
				for (var i = 0; i < e.target.files.length; i++) {
					var file = e.target.files[i];
					//console.log(file); 
					if (!(/^image\/.*$/i.test(file.type))) {
						continue; //不是图片 就跳出这一次循环 
					}
					//实例化FileReader API 
					var freader = new FileReader();
					freader.readAsDataURL(file);
					freader.onload = function(e) {
						//console.log(e);
						//console.log( e.target.result);
						imgURl = e.target.result;
						$("#qrcode").empty();
						makeQrcode(nowUrl, nowSize, imgURl, nowLogoSize);
					}
				}
			}

			//生成二维码图像
			function f_onCreateQrcode() {
				if ($("#txtContent").val() == '') {
					popup({
						'content': '请输入链接哦'
					});
					return false;
				}else{
					nowUrl = $("#txtContent").val()
				} 
				$('#urltxt').val(nowUrl)
				$("#qrcode").empty(); 
				getQrSize();
				makeQrcode(nowUrl, nowSize, imgURl, nowLogoSize);
			}

			var closeLogo = function() {
				$("#getLogo").val("");
				$("#qrcode").empty();
				imgURl = "";
				makeQrcode(nowUrl, nowSize, imgURl, 0);
			};

			//清除二维码内容
			function f_onClearQrcode() {
				if (txtContent) {
					$("#txtContent").val('') 
					$('#urltxt').val('')
					// 使用 API
					$("#qrcode").empty();
					nowSize = 260;
					nowSizeRulse();
					popup({
						'content': '页面信息已清除~'
					});
					setTimeout(function() {
						tips.html("");
					}, 3000)
					nowUrl = 'http://gz.offcn.com/';
					imgURl = "./images/qr_logo.png";
					makeQrcode(nowUrl, nowSize, imgURl, nowLogoSize);
				}
			}
	 	 
		 
		 var imgId = document.getElementById("imgId");
		 document.getElementById("save").onclick = function (){
		     downLoad(saveAsPNG(canvas));
		 }
		  
		 // 保存成png格式的图片
		 function saveAsPNG(canvas) {
		     return canvas.toDataURL("image/png");
		 }
		  
		 // 保存成jpg格式的图片
		 function saveAsJPG(canvas) {
		     return canvas.toDataURL("image/jpeg");
		 }
		  
		 // 保存成bmp格式的图片  目前浏览器支持性不好
		 function saveAsBMP(canvas) {
		     return canvas.toDataURL("image/bmp");
		 }
		   
		   
		 function downLoad(url){
		     var oA = document.createElement("a");
		     oA.download = '二维码';// 设置下载的文件名，默认是'下载'
		     oA.href = url;
		     document.body.appendChild(oA);
		     oA.click();
		     oA.remove(); // 下载之后把创建的元素删除
		 }
		 
		 
    </script>
